<template>
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2 class="txt">学校地址：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "北京大学",
      address: "北京",
    };
  },
};
</script>

// `lang='less'`如果没有引入less-loader会报错。
<style scoped>
/* scoped代表局部的
  scoped原理：
  通过给组件添加data-v-xx
  .demo[data-v-xx]{} */
.demo {
  background-color: skyblue;
}
</style>